<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>添加员工页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/styleemp.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/time.js"></script>
    <style type="text/css">
        #exit {
            padding: 26px 15px 0 0;
            margin: 0;
            text-align: right;
        }
    </style>
</head>

<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p id="time"></p>
                <a id="exit" href="javascript:;" @click="exit">安全退出</a>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="login.html">员工信息</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                添加员工信息
            </h1>
            <form action="emplist.html" method="post">
                <table cellpadding="0" cellspacing="0" border="0"
                       class="form_table">
                    <tr>
                        <td valign="middle" align="right">
                            姓名:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="employee.name"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            头像:
                        </td>
                        <td valign="middle" align="left">
                            <input type="file" ref="photo"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            工资:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="employee.salary"/>
                        </td>
                    </tr>
                    <tr>
                        <td valign="middle" align="right">
                            年龄:
                        </td>
                        <td valign="middle" align="left">
                            <input type="text" class="inputgri" v-model="employee.age"/>
                        </td>
                    </tr>
                </table>
                <p>
                    <input type="button" class="button" value="提交 &raquo;" @click="saveEmployee"/>
                </p>
            </form>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            1453771560@qq.com
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            user: {},
            employee: {}
        },
        methods: {
            exit() {
                localStorage.removeItem("user");
                alert("确定退出吗?");
                location.href = "login.html";
                // location.reload(true); 刷新页面
            },
            saveEmployee() {
                //输出员工信息和头像
                // console.log(this.employee);
                // console.log(this.$refs.photo.files[0]);
                if (window.confirm("确定要添加此员工信息吗?")) {
                    var formData = new FormData();
                    formData.append("name", this.employee.name);
                    formData.append("salary", this.employee.salary);
                    formData.append("age", this.employee.age);
                    formData.append("photo", this.$refs.photo.files[0]);
                    //文件上传时，请求方式必须是post,enctype必须为multipart/form-data
                    axios({
                        method: "post",
                        url: "http://localhost:8080/employee/save",
                        data: formData,
                        headers: {
                            "content-type": "mutipart/form-data"
                        }
                    }).then(request => {
                        console.log(request.data);
                        if (request.data.status) {
                            alert(request.data.msg + "点击确定返回员工列表");
                            location.href = "emplist.html";
                        } else {
                            alert(request.data.msg);
                        }
                    })
                }
            }
        },
        mounted() {
            var userLocal = JSON.parse(localStorage.getItem("user"));
            if (userLocal) {
                this.user = userLocal;
            } else {
                alert("您还没有登录，点击确认跳转至登录界面");
                location.href = "login.html";
            }
        }
    })
</script>